<template>
  <div>
    <van-button type="default" @click="created">默认按钮</van-button>
    <van-button type="primary" @click="start">主要按钮</van-button>
    <br />
    <van-button type="info" @click="ok">发送get请求</van-button>
    <van-button type="warning" @click="test">发送post请求</van-button>

    <!-- 测试vant ui组件是否正常 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" info="5" />
      <van-goods-action-icon icon="shop-o" text="店铺" info="12" />
      <van-goods-action-button type="warning" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
  import { Toast } from 'vant';
  export default {
    data() {
      return {
        msg: '测试页面'
      }
    },
    methods: {
      created() {
        Toast('页面创建完成');
      },
      start() {
        Toast('开始写代码吧');
      },
      ok() {
           this.$axios({
                method:'get',
                url:'/movie/in_theaters',
            }).then( (res) => {          //这里使用了ES6的语法
                console.log(res)       //请求成功返回的数据
            }).catch( (err) =>{
                console.log(err)       //请求失败返回的数据
            })
      },
      test() {
          this.$axios({
              method:'post',
              url:'/movie/top250',
              data:{ //参数
                start:10,
                count:10,
              }
          }).then( (res) => {          
              console.log(res)       //请求成功返回的数据
          }).catch( (err) =>{
              console.log(err)       //请求失败返回的数据
          })
      }

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>